<template>
  <view :style="colorStyle">
    <view class="applyModule">
      <image
        :src="configInfo.distribution"
        class="img"
        mode="aspectFill"
      ></image>
      <view
        class="ruleModule cfff f24"
        @click="gourl('/pages/distributor/list')"
      >
        申请记录
      </view>
    </view>

    <view class="infobox1">
      <view class="info1">
        <view class="label"> 姓名 </view>
        <view class="input">
          <input
            type="text"
            class="c1F1F1F f28"
            placeholder-class="placeholder"
            placeholder="请输入联系人姓名"
            v-model="name"
          />
        </view>
      </view>
      <view class="info1">
        <view class="label"> 手机号码 </view>
        <view class="input">
          <input
            type="number"
            class="c1F1F1F f28"
            placeholder-class="placeholder"
            placeholder="请输入手机号码"
            v-model="mobile"
            :disabled="true"
          />
        </view>
      </view>
      <!-- <view class="info1" style="border: none">
        <view class="label"> 上传凭证（仅支持9张） </view>
        <view class="imgList flex wrap aitems">
          <view class="img" v-for="(item, index, key) in img" :key="key">
            <image :src="item" mode="aspectFill"></image>
            <view class="close" @click="closeImg(index)">
              <image src="@/static/img41.png" class="" mode=""></image>
            </view>
          </view>
          <view class="img" @click="uploadImg" v-if="img.length < 9">
            <image src="@/static/img20.png" mode=""></image>
          </view>
        </view>
      </view> -->
      <view class="globalBtns">
        <view class="block1" @click="save"> 提交申请 </view>
        <view class="radioGroup">
          <radio-group>
            <view class="radio flex aitems jcenter" @click="check = !check">
              <radio
                style="transform: scale(0.7)"
                :checked="check"
                :activeBackgroundColor="`var(--view-theme)`"
                color="var(--view-theme)"
              ></radio>
              <view class="radiotext f24">
                请认真阅读并同意<text
                  @click="
                    gourl(
                      `/pages/user/xieyi?key=distributor_code&title=申请须知`
                    )
                  "
                  >《申请须知》</text
                >
              </view>
            </view>
          </radio-group>
        </view>
      </view>
    </view>

    <!-- <view class="globalBtns"
			style="position: relative; top:-120rpx; margin: 50rpx 30rpx 0; background: transparent;">
			<view class="block1" @click="save" style="background: #EF8200;">
				审核中
			</view>
		</view>

		<view class="globalBtns"
			style="position: relative; top:-120rpx; margin: 50rpx 30rpx 0; background: transparent;">
			<view class="block1" @click="save" style="background:  var(--view-theme);">
				审核通过
			</view>
		</view>

		<view class="globalBtns"
			style="position: relative; top:-120rpx; margin: 50rpx 30rpx 0; background: transparent;">
			<view class="block1" @click="save" style="background: #DD5C5C;">
				重新申请
			</view>
			<view class="radioGroup">
				<radio-group>
					<view class="radio flex aitems jcenter">
						<radio style="transform: scale(0.7);" :checked="check"
							:activeBackgroundColor="`var(--view-theme)`"></radio>
						<view class="radiotext f24">
							请认真阅读并同意<text
								@click="gourl(`/pages/user/xieyi?key=distributor_code&title=申请须知`)">《商家入驻协议》</text>
						</view>
					</view>
				</radio-group>
			</view>
		</view> -->

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  userinfo,
  placeApplySave,
  placAapplyUpdate,
  applyInfo,
  putFileOSS,
  config as configAPI,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, showModal, msg, back, go } from "@/utils/wxAPI";
import { getToken, setStorage } from "../../utils/storage";
import { isvalidatemobile } from "@/utils/validate.js";
export default {
  mixins: [colors],
  data() {
    return {
      check: false,
      img: [],
      name: "",
      mobile: "",
      options: {},
      configInfo: {},
      info: {},
    };
  },
  onLoad(options) {
    this.options = options;
    if (getToken()) {
      // this.handleConfigGoods();
      this.userinfo();
      this.config();
    }
  },
  methods: {
    async handleConfigGoods() {
      loading();
      let { data } = await configAPI({
        key: "place.goods",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        console.log(info);
        if (info.applyType == 2) {
          uni.redirectTo({
            url: `/pages/distributor/goodsApplay`,
          });
        }
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
        this.name = info.nickName;
        this.mobile = info.mobile;
        if (!this.info.mobile) {
          showModal({
            t2: "暂未注册，请前往注册",
            btn1show: false,
          }).then(() => {
            uni.reLaunch({
              url: "/pages/reg/reg",
            });
          });
        }
      }
      uni.hideLoading();
    },
    async config() {
      let { data } = await configAPI({
        key: "imgs",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        this.configInfo = info;
      }
    },
    closeImg(index) {
      this.img.splice(index, 1);
    },
    async uploadImg() {
      uni.chooseImage({
        count: 9 - this.img.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.img.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    async save() {
      if (!this.check) {
        return msg("请阅读并同意《申请须知》");
      }
      if (!this.name) {
        return msg("请输入联系人姓名");
      }
      if (isvalidatemobile(this.mobile)[0]) {
        return msg(isvalidatemobile(this.mobile)[1]);
      }
      // if (this.img.length == 0) {
      //   return msg("至少上传1张图片");
      // }
      loading();
      if (this.options.id) {
        let { data } = await placAapplyUpdate({
          name: this.name,
          mobile: this.mobile,
          img: this.img.length == 0 ? "" : this.img.join(","),
          id: this.options.id ? this.options.id : "",
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          showModal({
            t2: "提交成功，请等待审核",
            btn1show: false,
          }).then(() => {
            this.name = "";
            this.mobile = "";
            this.img = [];
            go(`/pages/distributor/list`);
          });
        }
        uni.hideLoading();
        return;
      }
      let { data } = await placeApplySave({
        name: this.name,
        mobile: this.mobile,
        img: this.img.join(","),
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        showModal({
          t2: "提交成功，请等待审核",
          btn1show: false,
        }).then(() => {
          this.name = "";
          this.mobile = "";
          this.img = [];
          go(`/pages/distributor/list`);
        });
      }
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.applyModule {
  position: relative;

  .img {
    width: 100%;
    height: 422rpx;
  }

  .ruleModule {
    position: fixed;
    width: 171rpx;
    height: 56rpx;
    border-radius: 28rpx 0 0 28rpx;
    right: 0;
    top: 66rpx;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    line-height: 56rpx;
    text-align: center;
  }
}

.infobox1 {
  background: #ffffff;
  margin: 30rpx 30rpx 0;
  padding: 30rpx 30rpx 40rpx 30rpx;
  border-radius: 30rpx;
  position: relative;
  top: -130rpx;
}

.infobox1 .info1 {
  // height: 100rpx;
  padding: 24rpx 0;
  // border-bottom: 1px solid red;
  border-bottom: 1px solid #f5f5f5;
}

.infobox1 .info1 .label {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #525252;
}

.infobox1 .info1 .label text {
  color: #f65b49;
  font-size: 24rpx;
}

.infobox1 .info1 .input {
  position: relative;
  margin: 24rpx 0 0;
  // width: calc(100% - 200rpx);
}

.infobox1 .info1 .placeholder {
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  color: #bec6cd;
}

.infobox1 .info1 .input input {
  // text-align: right;
  width: 100%;
  font-style: normal;
  font-weight: 400;
  // font-size: 32rpx;
  // color: #858585;
}

.infobox1 .info1 .icon {
  width: 100rpx;
  height: 60rpx;
}

.imgList {
  margin: 30rpx 0 0;

  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 24rpx;
    margin: 0 30rpx 30rpx 0;
  }

  .img {
    position: relative;

    .close {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      // border: 1px solid #858585;
      position: absolute;
      right: 10rpx;
      top: -10rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        // margin: auto;
        // top: 50%;
        // margin-top: -15rpx;
        // position: absolute;
        // left: 50%;
        // margin-left: -15rpx;
      }
    }
  }
}

.infobox1 .info1 .input .right {
  width: 40rpx;
  // height: 24rpx;
  position: absolute;
  top: 0rpx;
  right: 0;
}

.btn {
  width: 600rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  color: #ffffff;
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  background: #5ccedd;
  border-radius: 44rpx;
  margin: 30rpx auto 0;
  position: relative;
}

.globalBtns {
  // position: fixed;
  // bottom: 0;
  // width: 100%;
  background: #fff;
  margin: 50rpx 0 0;
  // padding: 0 0 50rpx 0;

  .block1 {
    // margin: 10rpx 30rpx 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
}

image {
  width: 100%;
  height: 100%;
}

.radioGroup {
  margin: 30rpx 0 0;

  .radiotext {
    // margin-left: 10rpx;
    text {
      color: #f65b49;
    }
  }
}
</style>
